<template>
  <div>
    <div ref="hd">{{title}}</div>
    <button @click="show = !show">切换</button>
    <div v-if="show" ref="child"><child /></div>
    
  </div>
</template>

<script>
  import Child from './components/Child.vue'
  export default {
    components:{Child},
    data() {
      return {
        title:'后盾人',
        show:true
      }
    },
    beforeCreate() {
      // 生命周期--创建之前，这个时候没有data，模板也没有挂载，更不能操作模板里的数据
      console.log('父组件：beforeCreate ' + this.title);
      console.log('父组件：beforeCreate ' + this.$refs.hd);
    },
    created (){
      // 生命周期--创建之后，这个时候有data了，可以在这个生命周期发送网络请求获取数据。但模板还没有挂载，不能操作模板里的数据(dom)。
      console.log('父组件：created ' + this.title);
      console.log('父组件：created ' + this.$refs.hd);
      setTimeout(() =>{this.title = "houdunren"},2000)
    },
    beforeMount() {
      // 生命周期--挂载之前，模板依然没有挂载
      console.log('父组件：beforeMount ' + this.$refs.hd);
    },
    mounted() {
      // 生命周期--挂载之后，模板挂载完成
      // 父组件挂载之前，先挂载其子组件
      console.log('父组件：mounted ' + this.$refs.hd);
    },
    beforeUpdate() {
      // 生命周期--更新之前，还可以对之前的dom进行操作
      console.log('父组件：beforeUpdate ' + this.title);
      console.log('父组件：beforeUpdate ' + this.$refs.child);
    },
    updated() {
      // 生命周期--更新之后
      console.log('父组件：updated ' + this.title);
      console.log('父组件：updated ' + this.$refs.child);
    },
  }
</script>

<style lang="scss" scoped>

</style>
